<template>
  <h1>1.组件的基本写法</h1>
  <p>name:{{ person.name }}</p>
  <p>age:{{ person.age }}</p>
  <hr />
  <p>name:{{ name }}</p>
  <p>age:{{ age }}</p>

  <button @click="changePerson">修改</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
});
</script>

<script lang="ts" setup>
import { reactive, toRefs } from "vue";

/* 
  - 如果直接解构代理对象,得到变量,则直接失去响应式能力
  - 如果想要解构代理对象的属性,并且还要保证响应能力存在,则需要使用toRefs的方法
  - 从toRefs解构出来的数据其实是ref对象,所以修改的时候要添加.value

*/

const person = reactive({
  name: "小王",
  age: 19,
});

let { name, age } = toRefs(person);
console.log(name, age);

const changePerson = () => {
  /* person.name = "小李";
  person.age++; */

  //并不是只修改当前的值,而是把它所在的被解构的代理对象的值也一并修改了
  age.value++;
};
</script>

<style scoped></style>
